<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="ico/favicon.ico">

<title>Banking System Login</title>

<!-- Bootstrap core CSS -->
<link href="resources/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="resources/css/jquery.dataTables.css" rel="stylesheet">
<link href="resources/font-awesome/css/font-awesome.css"
	rel="stylesheet">
<link href="resources/css/jquery.dataTables_themeroller.css"
	rel="stylesheet">
<link href="resources/css/styles.css" rel="stylesheet">
<style type="text/css">
	.login-panel {
    margin-top: 100px;
}
</style>
</head>
<body class="login-page">
	<header>
		<div class="main-header">
			<div class="container">
				<div class="row">
					<div class="col-sm-4">
						<div class="logo text-center">
							<a href="#"><img src="resources/img/logo.png" alt="Logo"></a>
						</div>
					</div>
					<div class="col-sm-8">
						<span class="name">Banking System</span>
					</div>
				</div>
			</div>
		</div>
	</header>
	<!--end .main-header-->
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-md-offset-4">
				<div class="login-panel panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Please Sign In</h3>
					</div>
					<div class="panel-body">
					<h3 class="error">${error }</h3>
						<form role="form" id="form-signin" method="post"
							action="login.html">
							<fieldset>
								<div class="form-group">
									<input class="form-control input-block-level" placeholder="Id"
										name="username" autocomplete="off" required="required"
										type="text" autofocus="true">
								</div>
								<div class="form-group">
									<input class="form-control input-block-level"
										placeholder="Password" name="password" type="password"
										autocomplete="off" required="required" value="">
								</div>
								<div class="checkbox">
									<label> <input name="remember" type="checkbox"
										value="Remember Me">Remember Me
									</label>
								</div>
								<!-- Change this to a button or input when using this as a form -->
								<button class="btn btn-lg btn-success btn-block" type="submit">Sign
									in</button>
							</fieldset>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="resources/js/jquery-2.1.1.min.js"></script>
	<script src="resources/js/bootstrap.min.js"></script>
	<script src="resources/js/jquery.dataTables.js"></script>
	<script src="resources/js/jquery.metisMenu.js"></script>
	<script src="resources/js/main.js"></script>
</body>
</html>
